<template>

    <div class="content manifest-list">
        <div class="content-top">
            <Button class="icon-btn" type="primary" @click="add">新建</Button>
            <Button class="icon-btn" type="primary" @click="apply">申报</Button>
            <Button class="icon-btn" @click="del">删除</Button>
            <!-- <Button class="icon-btn" type="primary" @click="importHandle">导入</Button> -->
            <SearchExpand class="search-collapse-small">
                <Form v-model="params" class="clearfix" :label-width="88">
                    <Row>
                        <iCol :span="2" class="search-label" >证书号</iCol>
                        <iCol :span="4">
                            <Input v-model="params.certNo" placeholder=""/>
                        </iCol>
                        <iCol :span="2" class="search-label" >证书类型</iCol>
                        <iCol :span="4">
                            <Select v-model="params.type" placeholder="">
                                <Option
                                    v-for="(item) in typeList"
                                    :key="item.id"
                                    :value="item.id"
                                    :label="item.id+item.name"
                                ></Option>
                            </Select>
                        </iCol>
                        <iCol :span="2" class="search-label" >企业名称</iCol>
                        <iCol :span="4">
                            <Input v-model="params.companyName" placeholder=""/>
                        </iCol>
                        <iCol :span="2" class="search-label" >发票号</iCol>
                        <iCol :span="4">
                            <Input v-model="params.invNo" placeholder=""/>
                        </iCol>
                        <iCol :span="2" class="search-label" >创建日期 从</iCol>
                        <iCol :span="4">
                            <DatePicker
                                :value="params.createStartTime"
                                format="MM/dd/yyyy"
                                type="date"
                                placeholder=""
                            >
                            </DatePicker>
                        </iCol>
                        <iCol :span="2" class="search-label" >至</iCol>
                        <iCol :span="4">
                            <DatePicker
                                :value="params.createEndTime"
                                format="MM/dd/yyyy"
                                type="date"
                                placeholder=""
                            >
                            </DatePicker>
                        </iCol>
                        <iCol :span="2" class="search-label" >申请日期 从</iCol>
                        <iCol :span="4">
                            <DatePicker
                                :value="params.applyStartTime"
                                format="MM/dd/yyyy"
                                type="date"
                                placeholder=""
                            >
                            </DatePicker>
                        </iCol>
                        <iCol :span="2" class="search-label" >至</iCol>
                        <iCol :span="4">
                            <DatePicker
                                :value="params.applyEndTime"
                                format="MM/dd/yyyy"
                                type="date"
                                placeholder=""
                            >
                            </DatePicker>
                        </iCol>
                        <iCol :span="2" class="search-label" ></iCol>
                        <iCol :span="4">
                            <Button class="icon-btn" type="primary" @click="search">
                                查询
                            </Button>
                        </iCol>
                    </Row>
                </Form>
            </SearchExpand>
        </div>
        <div class="content-body">
            <Table @on-selection-change="changeSelected" :data="list" :columns="columns" border align="center">

                <template slot-scope="{ row }" slot="certNo">
                    <div><a @click="view(row)" >{{row.certNo}}</a></div>
                </template>
                <template slot-scope="{ row }" slot="type">
                    <div>{{ row.type=='C'?'一般原产地证':row.type=='B'?'亚太贸易协定原产地证书':row.type=='G'?'惠普制原产地证书':row.type=='E'?'中国-东欧自贸区原产地证书':'' }}</div>
                </template>
                <template slot-scope="{ row }" slot="status">
                    <div>{{ row.status==1?'申报':'暂存' }}</div>
                </template>

            </Table>
            <Pagination
                :pageSize.sync="params.pageSize"
                :current.sync="params.pageNum"
                :total="total"
                @change="queryList"
            />
        </div>

    </div>
</template>
<script>
import { queryCertificate, delCertificate, applyCertificate } from '@/api/certiData'
import { downloadDoc } from '@/api/fileManage'
import SearchExpand from '_c/search-expand'
export default {
    inject: ['nextPageReload'],
    components: {
        SearchExpand
    },
    data () {
        return {
            selecetd: [],
            total: 0,
            typeList: [
                { id: 'C', name: '一般原产地证' },
                { id: 'B', name: '亚太贸易协定原产地证书' },
                { id: 'G', name: '惠普制原产地证书' },
                { id: 'E', name: '中国-东欧自贸区原产地证书' }
            ],
            roleType: '',
            schoolList: [],
            params: {
                certNo: '',
                type: '',
                companyName: '',
                invNo: '',
                applyStartTime: '',
                applyEndTime: '',
                createStartTime: '',
                createEndTime: '',
                pageNum: 1,
                pageSize: 10
            },
            list: [],
            columns: Object.freeze([
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                { title: '序号', type: 'index', align: 'center', width: 80 },
                { title: '证书号', slot: 'certNo', align: 'center', width: 200 },
                { title: '发票号', key: 'invNo', align: 'center' },
                { title: '证书类型', slot: 'type', align: 'center' },
                { title: '目的国/地区', key: 'destCountry', align: 'center' },
                { title: '企业名称', key: 'companyName', align: 'center' },
                { title: '进口商', key: 'consignee', align: 'center' },
                { title: '创建时间', key: 'createTime', align: 'center' },
                { title: '单据状态', slot: 'status', align: 'center' }

            ])
        }
    },
    mounted () {
        this.queryList()
        // this.getSchoolList()
        // this.getRoleType()
    },
    methods: {
        changeSelected (data) {
            this.selecetd = data
        },
        clearSearch () {
            this.certNo = ''
            this.type = ''
            this.companyName = ''
            this.invNo = ''
            this.applyStartTime = ''
            this.applyEndTime = ''
            this.createStartTime = ''
            this.createEndTime = ''
            this.queryList()
        },
        search () {
            this.params.pageNum = 1
            this.queryList()
        },
        queryList () {
            queryCertificate(this.params).then(res => {
                if (res.data.code === '0000') {
                    this.list = res.data.data.list
                    this.total = res.data.data.total
                }
            })
        },
        view (row) {
            this.nextPageReload()
            var types = {
                C: 'normalCert',
                B: 'asiaCert',
                G: 'hpCert',
                E: 'chinaCert'
            }
            this.$router.push({
                name: types[row.type],
                query: {
                    type: row.type,
                    certNo: row.certNo
                }
            })
        },
        add () {
            this.nextPageReload()
            this.$router.push({
                name: 'certAdd'
            })
        },
        handleEdit (id) {
            this.nextPageReload()
            this.$router.push({
                name: 'normalCert',
                query: {
                    type: type
                }
            })
        },
        apply () {
            if (this.selecetd.length > 0) {
                let idArr = this.selecetd.map(item => {
                    return item.originId
                })
                let ids = idArr.join(',')
                applyCertificate({ originIds: ids }).then(res => {
                    if (res.data.code === '0000') {
                        this.$Message.success('申报成功')
                        this.params.pageNum = 1
                        this.queryList()
                    } else {
                        this.$Message.error(res.data.msg)
                    }
                })
            } else {
                this.$Message.error('请勾选')
            }
        },
        del (id) {
            this.$Modal.confirm({
                title: '提示',
                content: '确认是否删除？',
                onOk: () => {
                    if (this.selecetd.length > 0) {
                        let idArr = this.selecetd.map(item => {
                            return item.originId
                        })
                        let ids = idArr.join(',')
                        delCertificate({ originIds: ids }).then(res => {
                            if (res.data.code === '0000') {
                                this.$Message.success('删除成功')
                                this.params.pageNum = 1
                                this.queryList()
                            } else {
                                this.$Message.error(res.data.msg)
                            }
                        })
                    } else {
                        this.$Message.error('请勾选')
                    }
                }
            })
        },
        handleDownload (id) {
            downloadDoc(id, '/case/download')
        }
    }
}
</script>
